<template>
  <div>
    <a-modal
      title="当前业务包含的附加项"
      v-model="visible"
      :footer="null"
      :width="800"
      @cancel="onCancel"
    >
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.id"
        :columns="extColumns"
        :data-source="extData"
        :pagination="false"
      >
        <template slot="xu" slot-scope="text,record,index">
          {{index + 1}}
        </template>
        <div slot="footer">
          <div :style="{ textAlign: 'right', fontSize: '16px', color: '#f00', fontWeight: 'bold' }">
            附加项总计官费: {{total}}
          </div>
        </div>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
  import contractColumns from '@/columns/contract'

  export default {
    props: {
      extList: {
        type: Array,
        default: () => []
      }
    },
    name: 'ExtView',
    data () {
      return {
        visible: true,
        extColumns: contractColumns.ext_columns,
        extData: [],
        total: 0
      }
    },
    created () {
      this.extData = this.extList
      for (let i = 0; i < this.extData.length; i++) {
        this.total += parseInt(this.extData[i].amount)
      }
    },
    methods: {
      onCancel () {
        this.visible = false
        this.$emit('cancel', this.visible)
      }
    }
  }
</script>

<style scoped>

</style>
